<template>
    <Navbar class="content">
      <div class="toBack" slot="navLeft" @click="toBack">
        <img src="~assets/img/commom/back.svg" alt="" />
      </div>
      <div class="details" slot="navMiddle">
        <div
          class="detailsItem"
          v-for="(item, index) in detailsItem"
          :key="index"
          @click="itemclick(index)"
          :class="isSelected(index)"
        >
          {{ item }}
        </div>
      </div>
    </Navbar>
</template>
<script>
import Navbar from "components/commom/navbar/Navbar";
export default {
  props:{
    curIndex:{
      type:Number,
      default:0
    }
  },
  components: {
    Navbar,
  },
  data() {
    return {
      detailsItem: ["商品", "参数", "评论", "推荐"],
      cIndex: 0,
    };
  },
  computed:{
    
  },
  methods: {
    itemclick(index) {
      this.cIndex = index;
      this.$emit('itemClick',index)
    },
    toBack() {
      this.$router.go(-1);
    },
    isSelected(index){
      this.cIndex = this.curIndex
      return this.cIndex == index ? 'isClick' : ''
    }
  }
};
</script>
<style scoped>

.content {
  box-shadow: 0 1px 1px #eee;
  background-color: #fff;
}
.details {
  display: flex;
  text-align: center;
  font-size: 14px;
}
.details .detailsItem {
  flex: 1;
}
.isClick {
  color: rgb(255, 145, 144);
}
.toBack {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toBack img {
  /* width:100%; */
}
</style>